<block name="style">
<style>
.flow-default {
    width: 100%;
    height: 400px;
    overflow: auto;
    font-size: 0;
}
.flow-default li {
    display: inline-block;
    margin: 0 5px;
    font-size: 14px;
    width: 15.2%;
    margin-bottom: 10px;
    height: 100px;
    text-align: center;
    background-color: #eee;
	cursor:pointer;
}
.flow-default li:hover{
	border:2px solid red;
	cursor:pointer;
}
.flow-default li.active{
	border:2px solid red;
}
.flow-default img {
    width: 100%;
    height: 100%;
}
</style>
</block>
<div class="show_avatar">
	<notempty name="avatar_list">
	<ul class="flow-default" style="" id="LAY_demo2">
		<volist name="avatar_list" id="vo">
		<li><img src="{$vo.thumb|get_cover='path'}" data-id="{$vo.id}"></li>
		</volist>
	</ul>
	<div class="layui-flow-more"><a href="javascript:;" class="avatar_btn" data-role="avatar_btn"><cite>保存头像</cite></a></div>
	<else/>
		暂无头像可选
	</notempty>
</div>
<div class="clear"></div>
<script>
    $(function () {
		$('ul.flow-default li').on('click',function(){
			$(this).addClass('active').siblings().removeClass('active');
		});
        $('[data-role=avatar_btn]').click(function(){
            //检查是否已经裁剪过
            var uid ='{$uid}';
            //提交到服务器
            var url = "{:U('home/member/saveAvatar')}";
			var path = $('ul.flow-default li.active img').attr('data-id');
            $.post(url, {uid: uid, path:path}, function (res) {
                layui.qn.handleAjax(res);
				return false;
            });

        })
    })
</script>